import React from 'react';
import { useI18n } from '@/utils/in18';

const SexTrafficking: React.FC = () => {
  const { locale } = useI18n();
  const [data, setData] = React.useState<any>(null);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    let cancelled = false;
    async function load() {
      setLoading(true);
      try {
        const lang = ['en', 'es', 'fr', 'ja', 'ru'].includes(locale) ? locale : 'en';
        const resp = await fetch(`/src/pages/Terms_of_SexTrafficking/${lang}.json`);
        if (!resp.ok) throw new Error('failed');
        const json = await resp.json();
        if (!cancelled) setData(json);
      } catch (e) {
        if (!cancelled) setData(null);
      } finally {
        if (!cancelled) setLoading(false);
      }
    }
    load();
    return () => { cancelled = true; };
  }, [locale]);

  if (loading) return <div className="p-8">Loading...</div>;
  if (!data) return <div className="p-8 text-red-600">Failed to load policy</div>;

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8">
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">{data.title}</h1>
          <p className="text-sm text-gray-600 dark:text-gray-400 mb-8">{data.lastModified}</p>

          <div className="space-y-6">
            {Object.entries(data.sections || {}).map(([key, section]: any) => (
              <section key={key} className="border-b border-gray-200 dark:border-gray-700 pb-6 last:border-b-0">
                <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">{section.title}</h2>
                <p className="text-gray-700 dark:text-gray-300 leading-relaxed">{section.content}</p>
              </section>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default SexTrafficking;